﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>目录样式的下拉菜单</title>
    <script type="text/javascript">
        function out()
        {
//判断鼠标是否移动到当前菜单或菜单中的项-第一个菜单的判断
            if(window.event.toElement.id!="menuOne"        &&       window.event.toElement.id!="link")
                menuOne.style.visibility="hidden";  //如果不是，则隐藏菜单
        }
        function out1()
        {
//判断鼠标是否移动到当前菜单或菜单中的项-第二个菜单的判断
            if(window.event.toElement.id!="menuTwo"        &&       window.event.toElement.id!="linkTwo")
                menuTwo.style.visibility="hidden";  //如果不是，则隐藏菜单
        }
    </script>
</head>
<body>
<div id="back" onmouseout="out()" style="position:absolute;top:180px;left:310px;width:160px;height:40px;z-index:1;visibility:visible;">
<span id="menubar"  onmouseover="menuOne.style.visibility='visible'">本站导航</span>
    <div border=1  id="menuOne" style="position:absolute;top:15px;left:0;width:70px;height:10px;z-index:2;visibility:hidden;">
        <a id="link" href="#">软件下载</a>
        <a id="A1" href="#">工具下载</a>
        <a id="A2" href="#">书籍介绍</a>
        <a id="A3" href="#">代码题库</a>
        <a id="A4" href="#">先进技术</a>
        <a id="A5" href="#">技术人物</a>
    </div>
</div>
<div id="Div1" onmouseout="out1()"style="position:absolute;top:181px;left:399px;width:160px;height:40px;z-index:3;visibility:visible;">
<span id="Span1"  onmouseover="menuTwo.style.visibility='visible'">服务导航</span>
    <div border=1  id="menuTwo" style="position:absolute;top:15px;left:0;width:70px;height:10px;z-index:4;visibility:hidden;">
        <a id="linkTwo" href="#">软件下载</a>
        <a id="A7" href="#">工具下载</a>
        <a id="A8" href="#">书籍介绍</a>
        <a id="A9" href="#">代码题库</a>
        <a id="A10" href="#">先进技术</a>
        <a id="A11" href="#">技术人物</a>
    </div>
</div>
</body>
</html>